<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<body>
<style>
    body{
        background-color: white;
    }
</style>
<div id="role">
    <template>
        <div slot="header">
            <el-form inline>
                <el-card>
                    <el-form-item label="姓名">
                        <el-input v-model="vo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="状态筛选:">
                        <template>
                            <el-radio-group v-model="vo.state">
                                <el-radio :label="-1">全部</el-radio>
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">停用</el-radio>
                            </el-radio-group>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="insertRole">新增</el-button>
                    </el-form-item>
                    <el-button type="primary" @click="toGrant">角色授权</el-button>
                </el-card>
            </el-form>
        </div>
        <el-table :data="roleList.data" height="250" border style="width: 100%" @selection-change="changeSelection"
                  stripe>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="roleId" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="180">
            </el-table-column>
            <el-table-column prop="state" label="角色状态">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.state == 1 ? '禁用' : '启用'}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button @click="updateRole(row)">修改</el-button>
                    <el-button type="danger" @click="del(row.roleId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination
                :page-sizes="[3,6,9]"
                :current-page.sync="vo.pageNo"
                :page-size.sync="vo.pageSize"
                @current-change="search"
                @size-change="search"
                background
                layout="prev, pager, next,sizes"
                :total="roleList.count">
        </el-pagination>
    </template>

    <!--    新增角色-->
    <el-dialog title="新增角色" :visible.sync="insertRoleFlag" center>
        <el-radio-group v-model="labelPosition" size="small">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
            <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="角色名称">
                <el-input v-model="formLabelAlign.roleName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch
                        v-model="formLabelAlign.State"
                        active-value="0"
                        inactive-value="1"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button @click="doinsert" type="primary">提交</el-button>
                <el-button @click="call">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--    修改-->
    <el-dialog title="修改商品" :visible.sync="updateRoleFlag" center>
        <el-form label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="updateRow.roleName"></el-input>
            </el-form-item>
            <el-form-item  label="状态：">
                <el-radio :label="1" v-model="updateRow.state">禁用</el-radio>
                <el-radio v-model="updateRow.state" :label="0">启用</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button @click="doUpdate" type="primary">提交</el-button>
                <el-button @click="updateRoleFlag=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--    角色授权-->
    <el-dialog title="角色授权" :visible.sync="grantFlag">
        <el-tree ref="tree" style="margin-left:30px;"
                 :data="treeData.data"
                 show-checkbox
                 node-key="id"
                 :check-strictly="true"
                 :default-checked-keys="treeData.defaultCheckedKeys">
        </el-tree>
        <span slot="footer">
               <el-button type="primary" @click="doGrant">确定</el-button>
           </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#role",
        data: {
            roleList: [],
            insertRoleFlag: false,
            roleIds: [],
            grantFlag: false,
            updateRoleFlag: false,
            labelPosition: 'right',
            updateRow: {},
            treeData: {
                data: [],
                defaultCheckedKeys: []
            },
            vo: {
                name: "",
                state: -1,
                pageNo: 1,
                pageSize: 6
            },
            formLabelAlign: {
                roleName: '',
                State: 0
            }
        },
        methods: {
            search() {
                axios.get("/role/search", {params: this.vo})
                    .then(({data}) => {
                        this.roleList = data;
                    })
            },
            // 新增
            insertRole() {
                this.insertRoleFlag = true;
            },
            doinsert() {
                axios.post('/role/insert', this.formLabelAlign)
                    .then(({data}) => {
                        this.insertRoleFlag = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    });
            },
            //修改
            updateRole(row) {
                this.updateRoleFlag = true;
                this.updateRow = row;
            },
            call(){
                insertRoleFlag=false;
                this.reset();
            },
            doUpdate() {
                axios.put('/role/update', this.updateRow)
                    .then(({data}) => {
                        this.updateRoleFlag = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                    });
                this.search();
            },
            del(roleId) {
                this.$confirm("确实要删除么？", "信息提示")
                    .then(() => {
                        axios.delete("/role/del?roleId=" + roleId)
                            .then(({data}) => {
                                this.$message({
                                    message: data.msg,
                                    type: data.code == 200 ? 'success' : 'error'
                                });
                            });
                        this.search();
                    });
            },
            initTree() {
                axios.get("/role/getTreeData?roleId=" + this.roleIds[0])
                    .then(({data}) => {
                        this.treeData = data.data;
                        console.log(data)
                    });
            },
            toGrant() {
                if (this.roleIds.length != 1) {
                    this.$alert("请选择一项待授权！", "消息提示");
                    return;
                }
                this.grantFlag = true;
                this.initTree();
            },
            changeSelection(arr) {
                this.grantFlag = false;
                this.roleIds = arr.map(role => role.roleId);
                console.log(this.roleIds)
            },
            doGrant() {
                let ids = this.$refs.tree.getCheckedKeys();
                axios.get("/role/grant?roleId=" + this.roleIds[0] + "&ids=" + ids)
                    .then(({data}) => {
                        this.$message({
                            type: 'success',
                            message: data.msg
                        });
                        this.grantFlag = false;
                    });
            },
            reset(){
                this.formLabelAlign.roleName='',
                    this.formLabelAlign.State=0;
            }
        },
        mounted() {
            this.search();
        }
    });
</script>
</body>
</html>